<template>
  <div class="sub-contain">
    <button class="doClose" @click="doClose">X</button>
    <template>
        <el-table :data="historyOrder" border style="width: 100%">
          <el-table-column fixed prop="incorporateSituation" label="并案情况">
          </el-table-column>
          <el-table-column prop="workOrderID" label="工单编号">
          </el-table-column>
          <el-table-column prop="orderTitle" label="工单标题">
          </el-table-column>
          <el-table-column prop="acceptTime" label="受理时间">
          </el-table-column>
          <el-table-column prop="bigClass" label="大类"> </el-table-column>
          <el-table-column prop="smallClass" label="小类"> </el-table-column>
          <el-table-column prop="area" label="区域"> </el-table-column>
          <el-table-column prop="location" label="位置"> </el-table-column>
          <el-table-column fixed="right" label="操作">
            <template slot-scope="scope">
              <el-button
                @click="handleClick(scope.row)"
                type="text"
                size="small"
                >查看</el-button
              >
              <el-button type="text" size="small">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
  </div>
</template>

<script>
export default {
  props: {
    dialog_visible: Boolean,
  },
  data() {
    return {
      visible: this.dialog_visible,
      historyOrder: [
        {
          incorporateSituation: "并案情况",
          workOrderID: "工单编号",
          orderTitle: "工单标题",
          acceptTime: "受理时间",
          bigClass: "大类",
          smallClass: "小类",
          area: "区域",
          location: "位置",
        },
        {
          incorporateSituation: "并案情况",
          workOrderID: "工单编号",
          orderTitle: "工单标题",
          acceptTime: "受理时间",
          bigClass: "大类",
          smallClass: "小类",
          area: "区域",
          location: "位置",
        },
        {
          incorporateSituation: "并案情况",
          workOrderID: "工单编号",
          orderTitle: "工单标题",
          acceptTime: "受理时间",
          bigClass: "大类",
          smallClass: "小类",
          area: "区域",
          location: "位置",
        },
        {
          incorporateSituation: "并案情况",
          workOrderID: "工单编号",
          orderTitle: "工单标题",
          acceptTime: "受理时间",
          bigClass: "大类",
          smallClass: "小类",
          area: "区域",
          location: "位置",
        },
      ],
    };
  },
  watch: {
    visible(val) {
      this.dialog_visible = val;
    },
  },
  methods: {
    doClose() {
      // 触发父组件中的dialogVisibleEvent事件，并传递参数
      this.$emit("dialogVisibleEvent", false);
    },
  },
};
</script>

<style lang="scss" scoped>
.sub-contain {
  min-height: 150px;
  width: 100%;
  padding: 20px;
  margin-bottom: 30px;
  background-color: #f5f5f5;
  color: #fff;
}
.doClose {
  background-color: transparent;
  color: #000000;
  text-align: left;
  border: 0px;
  position: absolute;
  top: 5px;
  right: 15px;
}
.doClose:hover {
  color: #f56c6c;
  font-size: 20px;
}
</style>